<template>
	<div class="reportSet">
		<i-form :model="formItem">
			<Row :gutter="16" class="row">
				<p class="setTitle">汇报注意事项：</p>
				<Card style="width:800px;float:left">
					<div style="line-height:30px">
						<p v-for="(item,index) in formItem.notes">
							{{index+1}}、{{item}}
							<a class="closeNote" @click="noteClose(index)"><Icon type="close"></Icon></a>
						</p>
						<Input style="margin-top:3px" v-model="newNote" icon="ios-plus-empty" placeholder="添加注意事项" @on-keyup.enter="noteAdd()"></Input>
					</div>
				</Card>
			</Row>
			<Row :gutter="16" class="row">
				<p class="setTitle">汇报对应工作日期：</p>
				<DatePicker v-model="formItem.time" type="daterange" placeholder="Select date" style="width: 300px"></DatePicker>
			</Row>
			<Row :gutter="16" class="row">
				<p class="setTitle">汇报提交起止时间：</p>
				<DatePicker v-model="formItem.submitTime" type="daterange" placeholder="Select date" style="width: 300px"></DatePicker>
			</Row>
			<Row :gutter="16" class="row">
				<p class="setTitle">部长审核起止时间：</p>
				<DatePicker v-model="formItem.examineTime" type="daterange" placeholder="Select date" style="width: 300px"></DatePicker>
			</Row>
			<Row :gutter="16" class="row">
				<p class="setTitle">汇报开关：</p>
				<i-switch v-model="setSwitch" @on-change="changeSwitch" size="large">
					<span slot="open">开</span>
					<span slot="close">关</span>
				</i-switch>
			</Row>
		</i-form>
	</div>
</template>

<script>
export default {
	name: 'reportSet',
	data () {
		return {
			formItem:{
				notes:[],
				time:'',
				submitTime:'',
				examineTime:''
			},
			newNote:'',
			setSwitch:false,
		}
	},
	methods:{
		changeSwitch(index){
			if(index){
				console.log(this.formItem.notes)
			}else{

			}
		},
		noteAdd(){
			if (this.newNote!=='') {
				this.formItem.notes.push(this.newNote);
				this.newNote=''
			}
		},
		noteClose(index){
			this.formItem.notes.splice(index, 1);
		}
	}
}
</script>

<style lang="css" scoped>
.reportSet{
	width: 100%;
	height: 100%;
	padding-top: 5px;
	padding-left: 10px
}
.setTitle{
	color: rgba(0,0,0,.65);
	width: 200px;
	text-align: right;
	float: left;
	font-size: 14px;
	padding-right: 10px;
	padding-top: 4px
}
.reportSet .row{
	margin-top: 24px;

}
.closeNote{
	float: right;
	margin-right: 10px;
}
</style>